<script lang="ts" setup>
import { ERelationType } from '@/common/enums';
import { useToPage } from '@/common/use/common';
import { IBanner } from '@/types';
import { onPageScroll, onShareAppMessage } from '@dcloudio/uni-app';
import { UniGoodsNavOption } from 'uni-ui-types';
import { reactive, ref } from 'vue';
import headerNav from './component/header-nav/header-nav.vue';
// typescript
const { switchTab, navigateTo } = useToPage();
const sharePopupRef = ref();
const headerNavRef = ref();
const host = "https://wxb.sale:8705/statis";
const banners = ref<IBanner[]>([
  { imageUrl: host + "/d1.jpg", relationType: ERelationType.COMMODITY },
  { imageUrl: host + "/d2.jpg", relationType: ERelationType.COMMODITY },
  { imageUrl: host + "/d3.jpg", relationType: ERelationType.COMMODITY },
  { imageUrl: host + "/d4.jpg", relationType: ERelationType.COMMODITY },
  { imageUrl: host + "/d5.jpg", relationType: ERelationType.COMMODITY }
]);
const details = ref([
  // {type: 1, url: host + "v.f20.mp4"},
  { type: 0, url: host + "/i1.jpg" },
  { type: 0, url: host + "/i2.jpg" },
  { type: 0, url: host + "/i3.jpg" },
  { type: 0, url: host + "/i4.jpg" },
  { type: 0, url: host + "/i5.jpg" },
  { type: 0, url: host + "/i6.jpg" },
  { type: 0, url: host + "/i7.jpg" },
  { type: 0, url: host + "/i8.jpg" },
  { type: 0, url: host + "/i9.jpg" },
  { type: 0, url: host + "/i10.jpg" },
]);
const buyColumn = reactive({
  // 左边小图标
  options: [
    {icon: 'chat', text: '客服'},
    {icon: 'cart', text: '购物车', info: 2}
  ] as UniGoodsNavOption[],
  // 大按钮
  buttonGroup: [
    {
      text: '加入购物车',
      backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
      color: '#fff',
      loading: false
    },
    {
      text: '立即购买',
      backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
      color: '#fff',
      loading: false
    }
  ]
});

// 购买栏左侧按钮点击事件
const buyLeftBtn = (ev: { index: number, content: any }) => {
  if (ev.index == 0) {
    // 点击客服
  } else if (ev.index == 1) {
    // 点击购物车
    switchTab("/pages/shopping-cart/shopping-cart");
  }
}

// 购买栏右侧按钮点击事件
const buyRightBtn = (ev: { index: number, content: any }) => {
  buyColumn.buttonGroup[ev.index].loading = true;
  if (ev.index == 0) {
    // 加入购物车
    addShoppingCart();
  } else if (ev.index == 1) {
    // 立即购买
    createOrder();
  }

  setTimeout(() => {
    buyColumn.buttonGroup[ev.index].loading = false;
  }, 500);
}

// 加入购物车
const addShoppingCart = async () => {
}

// 头部导航点击
const headerNavChange = (index: number) => {
  const navClassIndex = [".banner-view", ".comment-view .target-view", ".detail-view .target-view", ".recommend-view .target-view"];
  const classes = navClassIndex[index];
  uni.pageScrollTo({selector: classes});
}

// 创建订单~立即购买
const createOrder = async () => {
  navigateTo("/pages/order-detail/order-detail?orderId=123456");
}

// 显示分享面板
const showsharePopup = () => {
  // 小程序直接调用小程序本身的 App调用原生的
  // #ifdef APP-PLUS
  sharePopupRef.value && sharePopupRef.value.open();
  // #endif

  // #ifndef APP-PLUS
  uni.showShareMenu({menus: ['shareAppMessage', 'shareTimeline']});
  // #endif
}

// 分享按钮点击
const onSahreSelect = () => {
  
}

onShareAppMessage(() => {
  console.log("监听分1享");
  return {
    title: "测试分享",
    path: "/pages/commodity-detail/commodity-detail"
  }
});

// 监听页面滚动
onPageScroll((ev) => {
  headerNavRef.value && headerNavRef.value.scrollPage(ev);
});
</script>

<!-- 商品详情 -->
<template>
  <view class="container">
    <!-- 头部导航 -->
    <header-nav ref="headerNavRef" @nav-change="headerNavChange" @share="showsharePopup"></header-nav>
    <!-- 商品轮播图 -->
    <view class="banner-view">
      <w-banner :banners="banners"></w-banner>
    </view>
    <!-- 价格、收藏按钮 -->
    <view class="price-view">
      <view class="price-box">
        <view class="price">￥2000.00</view>
        <view class="button-view">
          <uni-icons v-if="false" color="#333" type="heart" size="24"></uni-icons>
          <uni-icons v-else color="#FF2121" type="heart" size="24"></uni-icons>
        </view>
      </view>
      <view class="title-box">
        Vivo XPlay6 新款畅销曲面屏手机
      </view>
    </view>
    <!-- 参数信息卡片 -->
    <view class="params-card">
      <uni-list>
        <!-- 销售量 -->
        <uni-list-item clickable show-arrow>
          <template #header>
            <text class="slot-header">已售</text>
          </template>

          <template v-slot:body>
            <text class="slot-body">10.5万件</text>
          </template>
        </uni-list-item>
        <!-- 已选 -->
        <uni-list-item clickable show-arrow>
          <template #header>
            <text class="slot-header">已选</text>
          </template>

          <template v-slot:body>
            <text class="slot-body">Vivo XPlay6 新款畅销曲面屏手机 64GB 藏蓝色</text>
          </template>
        </uni-list-item>
        <!-- 配送至 -->
        <uni-list-item clickable show-arrow>
          <template #header>
            <text class="slot-header">送至</text>
          </template>

          <template v-slot:body>
            <text class="slot-body">河北省石家庄市高新区科技中心B座88层大楼</text>
          </template>
        </uni-list-item>
      </uni-list>
    </view>
    <!-- 服务卡片 -->
    <view class="service-card">
      <uni-list>
        <uni-list-item clickable show-arrow>
          <template #header>
            <text class="slot-header">专业服务</text>
          </template>

          <template v-slot:body>
            <text class="slot-body">7天无理由·24小时极速退款·商城专属服务</text>
          </template>
        </uni-list-item>
      </uni-list>
    </view>
    <!-- 评价卡片 -->
    <view class="comment-view">
      <view class="target-view"></view>
      <uni-list>
        <uni-list-item clickable show-arrow title="评价 2000">
          <template #footer>
            <text class="slot-footer">好评95%</text>
          </template>
        </uni-list-item>
      </uni-list>

      <view class="comment-list">
        <template v-for="(item, itemIndex) in 2" :key="itemIndex">
          <w-comment-card></w-comment-card>
        </template>
      </view>
    </view>
    <!-- 商品详情信息 -->
    <view class="detail-view">
      <view class="target-view"></view>
      <uni-section class="section" title="详情" type="line" padding>
        <template v-for="(item, itemIndex) in details" :key="itemIndex">
          <view class="image-view">
            <image :src="item.url" mode="widthFix"></image>
          </view>
        </template>
      </uni-section>
    </view>
    <!-- 推荐商品列表 -->
    <view class="recommend-view">
      <view class="target-view"></view>
      <uni-section class="section" title="更多推荐" type="line" padding>
        <w-commodity-card-list></w-commodity-card-list>
      </uni-section>
    </view>
    <!-- 购买栏 -->
    <view class="now-buy-view">
      <w-goods-nav :options="buyColumn.options" fill :button-group="buyColumn.buttonGroup" @click="buyLeftBtn"
        @buttonClick="buyRightBtn" />
    </view>
  </view>

  <!-- 分享弹出层 -->
  <uni-popup ref="sharePopupRef" type="share" safeArea :background-color="('#fff' as any)">
    <uni-popup-share @select="onSahreSelect"></uni-popup-share>
  </uni-popup>
</template>

<style scoped lang="scss">
// scss
$padding: 30rpx;

.container {
  min-height: 100vh;
  background-color: $border-color;
  padding-bottom: 100rpx;

  .slot-header {
    color: #BCBCBC;
    font-size: 28rpx;
    // padding-right: 20rpx;
    min-width: 70rpx;
  }

  .slot-body {
    color: $text-color;
    font-size: 28rpx;
  }
}

.banner-view {
  height: 750rpx;
}

.price-view {
  padding: 20rpx $padding;
  background-color: #fff;

  .price-box {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .price {
      font-size: 48rpx;
      color: $amount-color;
    }
  }

  .title-box {
    text {
      font-size: 36rpx;
      color: $text-color;
    }
  }
}

.params-card {
  margin-top: 20rpx;
}

.service-card {
  margin-top: 20rpx;

  .slot-header,
  .slot-body {
    font-size: 24rpx;
    color: #BCBCBC;
  }

  .slot-header {
    color: $primary-color;
    padding-right: 20rpx;
  }
}

.comment-view {
  margin-top: 20rpx;
  position: relative;

  .slot-footer {
    color: $amount-color;
    font-size: 28rpx;
  }
}

.detail-view {
  margin: 20rpx 0;
  position: relative;

  .image-view {
    width: 100%;

    image {
      width: 100%;
      display: block;
    }
  }
}

.recommend-view {
  position: relative;
}

.now-buy-view {
  width: 100%;
  height: 100rpx;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 5;
}

:deep(.section) {
  .uni-section-header__decoration {
    background-color: $primary-color;
  }

  .uni-section-content {
    padding: 0 !important;
  }
}

.target-view {
  position: absolute;
  left: 0;
  top: calc(-44px - var(--status-bar-height));
}
</style>
